@extends('admin.layout')

@section('title', '用户详情')
@section('page-title', '用户详情')

@section('content')
<div class="space-y-6" x-data="userDetail()" x-init="init({{ $id }})">
    <!-- 返回按钮 -->
    <div class="flex items-center">
        <a href="{{ route('admin.users.index') }}" class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
            <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            返回用户列表
        </a>
    </div>

    <!-- 用户基本信息 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center space-x-6">
                <!-- 用户头像 -->
                <div class="flex-shrink-0">
                    <div class="h-20 w-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                        <span class="text-2xl font-medium text-white" x-text="user.nickname ? user.nickname[0] : 'U'"></span>
                    </div>
                </div>
                
                <!-- 用户信息 -->
                <div class="flex-1 min-w-0">
                    <h1 class="text-2xl font-bold text-gray-900" x-text="user.nickname || '未设置昵称'"></h1>
                    <p class="text-sm text-gray-500" x-text="user.phone || '未绑定手机'"></p>
                    <div class="mt-2 flex items-center space-x-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
                              :class="user.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
                              x-text="user.is_active ? '活跃用户' : '非活跃用户'"></span>
                        <span class="text-sm text-gray-500">注册时间: <span x-text="formatDate(user.created_at)"></span></span>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex space-x-3">
                    <button @click="toggleUserStatus()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                            :class="user.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
                        <span x-text="user.is_active ? '禁用用户' : '启用用户'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户统计信息 -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3" x-show="!loading">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">房间总数</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="user.rooms_count || 0"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">订单总数</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="user.orders_count || 0"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">用户ID</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="user.id || 'N/A'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户详细信息 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">详细信息</h3>
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">OpenID</dt>
                    <dd class="mt-1 text-sm text-gray-900 font-mono" x-text="user.openid || '无'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">性别</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="user.gender || '未设置'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">地区</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="(user.province || '') + (user.city ? ' ' + user.city : '') || '未设置'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">语言</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="user.language || '未设置'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">最后更新</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="formatDate(user.updated_at)"></dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- 用户房间列表 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">创建的房间</h3>
            <div class="flow-root">
                <ul class="-mb-8" x-show="user.created_rooms && user.created_rooms.length > 0">
                    <template x-for="room in user.created_rooms" :key="room.id">
                        <li>
                            <div class="relative pb-8">
                                <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                                            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                        <div>
                                            <p class="text-sm font-medium text-gray-900" x-text="room.name"></p>
                                            <p class="text-sm text-gray-500" x-text="'创建时间: ' + formatDate(room.created_at)"></p>
                                        </div>
                                        <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
                                                  :class="room.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
                                                  x-text="room.status === 'active' ? '活跃' : '非活跃'"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
                <div x-show="!user.created_rooms || user.created_rooms.length === 0" class="text-center py-4">
                    <p class="text-sm text-gray-500">该用户还没有创建任何房间</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户最近订单 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">最近订单</h3>
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">房间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">菜品数</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="order in user.recent_orders" :key="order.id">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" x-text="'#' + order.order_id"></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="order.room ? order.room.name : '未知房间'"></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="order.dishes_count + '道菜'"></td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" 
                                          :class="order.status === 'confirmed' ? 'bg-green-100 text-green-800' : (order.status === 'cancelled' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800')"
                                          x-text="order.status === 'confirmed' ? '已完成' : (order.status === 'cancelled' ? '已取消' : '处理中')"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="formatDate(order.created_at)"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div x-show="loading" class="text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="mt-2 text-sm text-gray-500">加载中...</p>
    </div>
</div>

<script>
function userDetail() {
    return {
        user: {},
        loading: true,
        userId: null,
        
        init(userId) {
            this.userId = userId;
            this.loadUserDetail();
        },
        
        async loadUserDetail() {
            this.loading = true;
            try {
                const response = await fetch(`/admin/api/users/${this.userId}`);
                this.user = await response.json();
            } catch (error) {
                console.error('加载用户详情失败:', error);
            } finally {
                this.loading = false;
            }
        },
        
        async toggleUserStatus() {
            try {
                const response = await fetch(`/admin/api/users/${this.user.id}/toggle-status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                
                if (response.ok) {
                    this.user.is_active = !this.user.is_active;
                }
            } catch (error) {
                console.error('更新用户状态失败:', error);
            }
        },
        
        formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        }
    }
}
</script>
@endsection
